<template>
  <div>
    <!-- <div>
      <el-avatar src="https://thirdwx.qlogo.cn/mmopen/vi_32/nktAPQCNZdgx5DcnM0Nk3jI0AHpCqssepcmPiarUxUIIflYrs0pRBy6VEQKNe2ia78oBDdXqWAgJdIr63GP0RVhg/132"></el-avatar>
    </div> -->
   <!-- <div style="margin-top: 15px;weight:60px" >
    <el-input placeholder="请输入内容" v-model="input" class="input-with-select" >
    <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    </div> -->
     欢迎你:{{username}}
          <div>
      <el-avatar :src="imageUrl"></el-avatar>
          </div>
    <!-- <el-avatar src="https://thirdwx.qlogo.cn/mmopen/vi_32/nktAPQCNZdgx5DcnM0Nk3jI0AHpCqssepcmPiarUxUIIflYrs0pRBy6VEQKNe2ia78oBDdXqWAgJdIr63GP0RVhg/132"></el-avatar> -->
     <el-button type="primary" @click="denglu">登录</el-button> 
      <el-link type="primary" @click="signsout" >退出登录</el-link> 
       <el-table
    :data="userslist"
   style="width: 100%"
    max-height="100%"
    >
     <!-- fixed -->
    <el-table-column
      
      prop="id"
      label="主键id"
      width="80">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系方式"
      width="100">
    </el-table-column>

<el-table-column
      prop="password"
      label="密码"
      width="150">
    </el-table-column>

    <el-table-column
      prop="address"
      label="地址"
      width="150">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="100">
    </el-table-column>
    <el-table-column
      prop="authority"
      label="权限"
      width="80">
    </el-table-column>
     <!-- <el-table-column
      prop="head_portrait"
      label="头像"
      width="300"> -->
     <el-table-column
     prop="head_portrait"
      label="头像"
      width="100">
            <!-- <el-popover placement="top-start" title="" trigger="hover"> -->
              <!-- <img :src="head_portrait" alt="" style="width: 150px;height: 150px"> -->
                      <template slot-scope="scope">
                        <img :src="scope.row.head_portrait" alt style="width: 100px;height:50px">
                      </template>
              <!-- <img slot="reference" :src="scope.row.product.cover" style="width: 30px;height: 30px"> -->
            <!-- </el-popover> --> 
    </el-table-column>
      
     <el-table-column
      prop="identity_id"
      label="用户学号/工号"
      width="100">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 <el-pagination
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="totalCount"
  @current-change="page">
</el-pagination>
  </div>
 
</template>
<style scoped>
 .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
  export default {
      methods:{
        denglu(){
          const _this=this
           _this.$router.push('/')
        },
      //    handleEdit(row) {
      //      console.log(row);
      //      this.$router.push({
              
      //        path:'/updateUser',
      //        query:{
      //          identity_id:row.identity_id
      //        }
      //      })
      //   console.log(row);
      // },
        handleEdit(row) {
          //alert(row.identity_id)
          console.log(row.identity_id);
          this.$router.push({
            path: "/updateUser",
            query: {
              identity_id: row.identity_id
            }
          });
    },

      handleDelete(row) {
        const _this=this
         var qs = require('qs');
         console.log(row.identity_id)
       axios({
            method:"get",
           url:"http://localhost:8088/users/web/delete?identity_id="+row.identity_id,
            
            //data:qs.stringify({identity_id:row.id}),
            headers:
            {
              // "Authorization":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ7XCJpZFwiOjksXCJ1c2VybmFtZVwiOm51bGwsXCJwaG9uZVwiOm51bGwsXCJhZGRyZXNzXCI6bnVsbCxcInJlbWFya1wiOm51bGwsXCJhdXRob3JpdHlcIjowLFwicGFzc3dvcmRcIjpcIjExMTExMVwiLFwiaGVhZF9wb3J0cmFpdFwiOm51bGwsXCJhcHBpZFwiOm51bGwsXCJzY29wZVwiOm51bGwsXCJzdGF0ZVwiOm51bGwsXCJ3aGV0aGVyX2RlbGV0ZVwiOm51bGwsXCJpZGVudGl0eV9pZFwiOlwiMTExMTExXCIsXCJjcmVhdGVfdGltZVwiOm51bGwsXCJ1cGRhdGVfdGltZVwiOm51bGwsXCJkZWxldGVfdGltZVwiOm51bGwsXCJvcmRlcnNMaXN0XCI6bnVsbH0iLCJleHAiOjE2MDUwOTU5OTZ9.TBEM_7Ti_Mm_UB9vD236lPstsqMjWAawBaBDFSp6oN0"
            'Authorization':sessionStorage.getItem('token'),
              //  'content-type': 'application/x-www-form-urlencoded',
            }
            
        }).then(function (resp){
          console.log(resp)
          if(resp.data.data.msg=='删除数据成功'){
            console.log(row)
              _this.$alert('《'+row.identity_id+'》删除成功！', '消息',{
                confirmButtonText: '确定',
                 callback: action =>{
                     window.location.reload()
                 }
              })
          }
        });
      },
          page(currentPage){
              alert(currentPage)
               const _this=this
                var qs = require('qs');
        axios({
            method:"post",
            url:"http://localhost:8088/users/web/users_list",
            data:qs.stringify({size:5,page:currentPage,sort:"id",asc:"asc"}),
            headers:
            {
              // "Authorization":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ7XCJpZFwiOjksXCJ1c2VybmFtZVwiOm51bGwsXCJwaG9uZVwiOm51bGwsXCJhZGRyZXNzXCI6bnVsbCxcInJlbWFya1wiOm51bGwsXCJhdXRob3JpdHlcIjowLFwicGFzc3dvcmRcIjpcIjExMTExMVwiLFwiaGVhZF9wb3J0cmFpdFwiOm51bGwsXCJhcHBpZFwiOm51bGwsXCJzY29wZVwiOm51bGwsXCJzdGF0ZVwiOm51bGwsXCJ3aGV0aGVyX2RlbGV0ZVwiOm51bGwsXCJpZGVudGl0eV9pZFwiOlwiMTExMTExXCIsXCJjcmVhdGVfdGltZVwiOm51bGwsXCJ1cGRhdGVfdGltZVwiOm51bGwsXCJkZWxldGVfdGltZVwiOm51bGwsXCJvcmRlcnNMaXN0XCI6bnVsbH0iLCJleHAiOjE2MDUwOTAxNTN9.VYI1_w6X8puL7gI1Wx4O78LMc56WxJgAaNwiBsYysUg"
             'Authorization':sessionStorage.getItem('token'),
                'content-type': 'application/x-www-form-urlencoded',
            }
            
        }).then(function (resp){
            console.log(resp)
        
            _this.userslist=resp.data.data.records.lists
            _this.totalCount=resp.data.data.records.totalCount
            _this.pageSize=resp.data.data.records.pageSize
        
        }) 
          },

          signsout(){
            const _this=this
             var storage = window.sessionStorage;
            storage.clear()
            this.$message('退出成功')
            _this.$router.push('/')
          },

      },
    data() {
      return {
        username:sessionStorage.getItem('username'),
       imageUrl: sessionStorage.getItem('head_portrait'),
         totalCount:10,
         pageSize:1,
         input:'',
        userslist: [
        {
          id: '1',
          username: '张三',
          phone: '111',
          password:'123',
          address: '111',
          remark: '111',
          authority: 0,
          head_portrait:'111',
          identity_id:'111'
        },
        {
          id: '2',
          username: '李四',
          phone: '222',
           password:'123',
          address: '222',
          remark: '222',
          authority: 0,
          head_portrait:'222',
          identity_id:'222'
        }, 
        {
          id: '3',
          username: '王五',
          phone: '333',
           password:'123',
          address: '333',
          remark: '333',
          authority: 0,
          head_portrait:'333',
          identity_id:'333'
        }, 
        {
           id: '4',
          username: '张四',
          phone: '444',
           password:'123',
          address: '444',
          remark: '444',
          authority: 0,
          head_portrait:'444',
          identity_id:'444'
        }, 
        {
           id: '5',
          username: '张五',
          phone: '555',
           password:'123',
          address: '555',
          remark: '555',
          authority: 0,
          head_portrait:'555',
          identity_id:'555'
        }, 
        {
          id: '6',
          username: '张六',
          phone: '666',
           password:'123',
          address: '666',
          remark: '666',
          authority: 0,
          head_portrait:'666',
          identity_id:'666'
        }, 
        {
          id: '7',
          username: '小三',
          phone: '777',
           password:'123',
          address: '777',
          remark: '777',
          authority: 0,
          head_portrait:'777',
          identity_id:'777'
        }
        ]
      }
    },
    created(){
        const _this=this
         var qs = require('qs');
         console
        axios({
            method:"post",
            url:"http://localhost:8088/users/web/users_list",
            data:qs.stringify({size:5,page:1,sort:"id",asc:"asc"}),
            headers:
            {
              // "Authorization":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ7XCJpZFwiOjksXCJ1c2VybmFtZVwiOm51bGwsXCJwaG9uZVwiOm51bGwsXCJhZGRyZXNzXCI6bnVsbCxcInJlbWFya1wiOm51bGwsXCJhdXRob3JpdHlcIjowLFwicGFzc3dvcmRcIjpcIjExMTExMVwiLFwiaGVhZF9wb3J0cmFpdFwiOm51bGwsXCJhcHBpZFwiOm51bGwsXCJzY29wZVwiOm51bGwsXCJzdGF0ZVwiOm51bGwsXCJ3aGV0aGVyX2RlbGV0ZVwiOm51bGwsXCJpZGVudGl0eV9pZFwiOlwiMTExMTExXCIsXCJjcmVhdGVfdGltZVwiOm51bGwsXCJ1cGRhdGVfdGltZVwiOm51bGwsXCJkZWxldGVfdGltZVwiOm51bGwsXCJvcmRlcnNMaXN0XCI6bnVsbH0iLCJleHAiOjE2MDQ4NDI1MzJ9.xjVfpKFN7_WgeS1KXAemi5gCbhKlSeqiRxIZaWcwe5c"
             'Authorization':sessionStorage.getItem('token'),
              'content-type': 'application/x-www-form-urlencoded',
            }
            
        }).then(function (resp){
            console.log(resp)
        
            _this.userslist=resp.data.data.records.lists
            _this.totalCount=resp.data.data.records.totalCount
            _this.pageSize=resp.data.data.records.pageSize
        })
    }
  }
</script>